<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
    <style>
    body {
    	font-family: 'HanHeiSC-thin';
        margin: 0;
        padding: 0;
        /*background: #ecebf0 url(Z.jpg) no-repeat center center fixed;*/
        background-color: #ecebf0;
        background-image: url(Z.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
    }

    section {
        width: 700px;
        min-height: 1000px;
        margin: 0 auto;
        background-color: #fff;
        position: absolute;
        top: 100px;
        left: 200px;
        padding: 10px;
        box-sizing: border-box;
    }

    article {
        display: inline-block;
        width: 315px;
        min-height: 315px;
        background-color: rgba(0, 0, 0, .38);
        margin: 10px;
        padding: 15px;
        box-sizing: border-box;
        position: relative;
    }

    article img {
        width: 100%;
        vertical-align: middle;
    }

    .bg {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        bottom: 50px;
        overflow: hidden;
        filter: blur(8px);
        -webkit-filter: blur(8px);
        -ms-filter: "alpha(Opacity=80)";
        height: auto;
    }

    h2 {
        position: relative;
        z-index: 1;
        line-height: 30px;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
    }

    p {
        position: relative;
        z-index: 1;
        font-size: 14px;
        color: rgba(255, 255, 255, .8);
        line-height: 22px;
    }

    article footer {
        position: relative;
        top: 85px;
        width: 315px;
        right: 15px;
        height: 50px;
        line-height: 50px;
        background-color: #fff;
    }

    footer img {
        border: 2px solid #fff;
        border-radius: 50px;
        width: 50px;
        height: 50px;
        position: absolute;
        z-index: 1;
        top: -12px;
        left: 16px;
        overflow: hidden;
    }

    footer .name {
        display: inline-block;
        max-width: 90px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 50px;
        font-size: 14px;
        color: #000;
        cursor: pointer;
        position: relative;
        left: 80px;
    }

    footer .zan {
        background-image: url(zan.png);
        background-repeat: no-repeat;
        float: right;
        cursor: pointer;
        color: #bcbcbc;
        font-size: 12px;
        margin-right: 14px;
        line-height: 50px;
    }

    footer .zan,
    .comments,
    .number {
        float: right;
        cursor: pointer;
        color: #bcbcbc;
        font-size: 12px;
        margin-right: 14px;
        line-height: 50px;
    }

    footer .zan {
        background-image: url(zan.png);
        background-repeat: no-repeat;
        display: inline-block;
        width: 17px;
        height: 19px;
        border-color: #fff;
        margin-right: 5px;
        vertical-align: middle;
        position: relative;
        top: 15px;
        right: 50px;
    }

    footer .comments {
        background-image: url(comments.png);
        background-repeat: no-repeat;
        display: inline-block;
        width: 17px;
        height: 19px;
        border-color: #fff;
        margin-right: 5px;
        vertical-align: middle;
        position: relative;
        top: 15px;
        right: 50px;
    }
    </style>
</head>

<body>
    <section>
        <article>
            <h2>快意恩仇，醉生梦死，行侠仗义</h2>
            <p>一壶浊酒眼迷离，敢爱敢恨浪红尘。路见不平拔剑相助，潇洒君子闯荡江湖。最后挑战天下英豪结束一生。或寻幽山秀水建一别院，煮酒练剑，佳人相伴，偶有好友前来比武同醉。</p>
            <div class="bg">
                <img src="img.jpg">
            </div>
            <footer>
                <img src="img.jpg">
                <span class="name">奔跑的一楠</span>
                <i class="zan"></i>
                <span class="number">11</span>
                <i class="comments"></i>
                <span class="number">11</span>
                </span>
            </footer>
        </article>
        <article>
            <h2>快意恩仇，醉生梦死，行侠仗义</h2>
            <p>一壶浊酒眼迷离，敢爱敢恨浪红尘。路见不平拔剑相助，潇洒君子闯荡江湖。最后挑战天下英豪结束一生。或寻幽山秀水建一别院，煮酒练剑，佳人相伴，偶有好友前来比武同醉。</p>
            <div class="bg">
                <img src="01.jpg">
            </div>
            <footer>
                <img src="01.jpg">
                <span class="name">奔跑的一楠</span>
                <i class="zan"></i>
                <span class="number">11</span>
                <i class="comments"></i>
                <span class="number">11</span>
                </span>
            </footer>
        </article>
        <article>
            <h2>快意恩仇，醉生梦死，行侠仗义</h2>
            <p>一壶浊酒眼迷离，敢爱敢恨浪红尘。路见不平拔剑相助，潇洒君子闯荡江湖。最后挑战天下英豪结束一生。或寻幽山秀水建一别院，煮酒练剑，佳人相伴，偶有好友前来比武同醉。</p>
            <div class="bg">
                <img src="002.jpg">
            </div>
            <footer>
                <img src="002.jpg">
                <span class="name">奔跑的一楠</span>
                <i class="zan"></i>
                <span class="number">11</span>
                <i class="comments"></i>
                <span class="number">11</span>
                </span>
            </footer>
        </article>
        <article>
            <h2>快意恩仇，醉生梦死，行侠仗义</h2>
            <p>一壶浊酒眼迷离，敢爱敢恨浪红尘。路见不平拔剑相助，潇洒君子闯荡江湖。最后挑战天下英豪结束一生。或寻幽山秀水建一别院，煮酒练剑，佳人相伴，偶有好友前来比武同醉。</p>
            <div class="bg">
                <img src="001.jpg">
            </div>
            <footer>
                <img src="001.jpg">
                <span class="name">奔跑的一楠</span>
                <i class="zan"></i>
                <span class="number">11</span>
                <i class="comments"></i>
                <span class="number">11</span>
                </span>
            </footer>
        </article>
        <article>
            <h2>快意恩仇，醉生梦死，行侠仗义</h2>
            <p>一壶浊酒眼迷离，敢爱敢恨浪红尘。路见不平拔剑相助，潇洒君子闯荡江湖。最后挑战天下英豪结束一生。或寻幽山秀水建一别院，煮酒练剑，佳人相伴，偶有好友前来比武同醉。</p>
            <div class="bg">
                <img src="1.jpg">
            </div>
            <footer>
                <img src="1.jpg">
                <span class="name">奔跑的一楠</span>
                <i class="zan"></i>
                <span class="number">11</span>
                <i class="comments"></i>
                <span class="number">11</span>
                </span>
            </footer>
        </article>
        <article>
            <h2>快意恩仇，醉生梦死，行侠仗义</h2>
            <p>一壶浊酒眼迷离，敢爱敢恨浪红尘。路见不平拔剑相助，潇洒君子闯荡江湖。最后挑战天下英豪结束一生。或寻幽山秀水建一别院，煮酒练剑，佳人相伴，偶有好友前来比武同醉。</p>
            <div class="bg">
                <img src="pic.jpg">
            </div>
            <footer>
                <img src="pic.jpg">
                <span class="name">奔跑的一楠</span>
                <i class="zan"></i>
                <span class="number">11</span>
                <i class="comments"></i>
                <span class="number">11</span>
                </span>
            </footer>
        </article>

    </section>
</body>

</html>
